<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header"> </a-layout-header>
    <a-layout>
      <a-layout-sider width="200">
        <a-menu
          mode="inline"
          :default-selected-keys="['1']"
          :default-open-keys="['sub1']"
          :style="{ height: '100%', borderRight: 0 }"
          router
        >
          <!-- 一级菜单 -->
          <a-sub-menu v-for="item in menuList" :key="item.id">
            <!-- 一级菜单的模板区域 -->
            <template slot="title">
              <span>{{ item.authName }}</span>
            </template>
            <a-menu-item v-for="subItem in item.children" :key="subItem.path">
              <!-- 路由的跳转 -->
              <router-link :to="'/' + subItem.path">
                {{ subItem.authName }}
              </router-link>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-breadcrumb separator=">" style="margin: 16px 0">
          <a-breadcrumb-item
            v-for="(item, index) of $route.matched"
            :key="index"
            style="padding: 5px"
          >
            <router-link :to="item.path" style="font-size: 15px">{{
              item.meta.title
            }}</router-link>
          </a-breadcrumb-item>
        </a-breadcrumb>
        <!-- <a-card>
          <router-view></router-view>
        </a-card> -->
        <router-view></router-view>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script>
import { getMenuList } from "@/network/user";
export default {
  data() {
    return {
      collapsed: false,
      menuList: [],
    };
  },
  created() {
    this.getUserList();
  },
  watch: {
    $route: "init",
  },
  mounted() {
    console.log(this.$route);
  },
  methods: {
    init() {
      console.log(this.$route);
    },
    getUserList() {
      getMenuList().then((res) => {
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
        this.$message.success(res.meta.msg);
        this.menuList = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
#root,
body,
html {
  height: 100%;
}
.ant-layout {
  width: 100%;
  min-height: 100%;
}
.ant-layout-header,
.ant-layout-sider {
  background-color: rgb(215, 234, 241);
  
}
.ant-menu{
  background-color: rgb(215, 234, 241);
}
</style>